<!--
 * @Author: wu_zh
 * @Date: 2021-04-14 14:27:40
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-18 10:57:55
 * @Descripttion: 
-->
<template>
  <div class="address-select-wrapper">
    <div class="address-select">
      <fks-cascader
        style="width:100%"
        :clearable="clearable"
        clearCheckedNodes
        :disabled="disabled"
        v-if="addressOptions.length"
        :key="cascaderKey"
        v-model="arr"
        :placeholder="addressTips"
        :options="addressOptions"
        :props="{
          expandTrigger: 'hover',
          value: 'code',
          label: 'label',
          children: 'children'
        }"
        @change="addressChange"
      ></fks-cascader>
    </div>
  </div>
</template>

<script>
import { getAddress } from './api'
export default {
  name: 'addressSelector',
  props: {
    addressArr: '',
    detailAddress: {
      type: String,
      default: ''
    },
    addressTips: {
      type: String,
      default: '请选择地区'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addressOptions: [],
      middleAddress: [],
      cascaderKey: 1,
      arr: this.addressArr || []
    }
  },
  computed: {
    newArr: {
      get: function(val) {
        return this.addressArr
      },
      set: function(val) {}
    }
  },
  watch: {
    addressArr: {
      handler(val) {
        this.arr = JSON.parse(JSON.stringify(val))
          ? JSON.parse(JSON.stringify(val))
          : []
      }
    },
    detailAddress: {
      handler(val) {
        this.getAddress()
      },
      immediate: true
    }
  },
  methods: {
    getAddress() {
      getAddress(this.detailAddress).then((res) => {
        this.addressOptions = res.data
        this.cascaderKey++
      })
    },
    addressChange(val) {
      this.$emit('addressChange', val)
    }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
